"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const _hoisted_1 = ["onClick"];
const _hoisted_2 = { class: "me-contextmenu-name" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "me-contextmenu-panel"
  },
  __name: "contextmenu-panel",
  props: {
    menus: { default() {
      return [];
    } }
  },
  emits: ["select"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const showMenu = vue.ref(false);
    const containerRef = vue.ref();
    const menuRef = vue.ref();
    const position = vue.ref({
      top: "0px",
      left: "0px"
    });
    const onContextmenu = (evt) => {
      showMenu.value = true;
      evt.preventDefault();
      evt.stopPropagation();
      vue.nextTick(() => {
        let left = evt.clientX;
        let top = evt.clientY;
        const rect = menuRef.value.getBoundingClientRect();
        const winW = window.innerWidth;
        const winH = window.innerHeight;
        left = left + rect.width > winW ? winW - rect.width : left;
        top = top + rect.height > winH ? winH - rect.height : top;
        position.value.top = top + "px";
        position.value.left = left + "px";
      });
    };
    const handleClickFn = () => {
      showMenu.value = false;
    };
    const onClickMenu = (menu) => {
      emits("select", menu);
    };
    vue.onMounted(() => {
      window.addEventListener("click", handleClickFn);
    });
    vue.onBeforeUnmount(() => {
      window.removeEventListener("click", handleClickFn);
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "containerRef",
        ref: containerRef,
        class: "me-contextmenu-panel",
        onContextmenu
      }, [
        vue.renderSlot(_ctx.$slots, "default"),
        showMenu.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
          key: 0,
          to: "body"
        }, [
          vue.createElementVNode("div", {
            ref_key: "menuRef",
            ref: menuRef,
            class: "me-contextmenu-content",
            style: vue.normalizeStyle({ ...position.value })
          }, [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menus, (menu) => {
              return vue.openBlock(), vue.createElementBlock("div", {
                onClick: ($event) => onClickMenu(menu),
                class: "me-contextmenu-item",
                key: menu.key
              }, [
                vue.renderSlot(_ctx.$slots, "menu", { menu }, () => [
                  vue.createElementVNode("span", _hoisted_2, vue.toDisplayString(menu.name), 1)
                ])
              ], 8, _hoisted_1);
            }), 128))
          ], 4)
        ])) : vue.createCommentVNode("", true)
      ], 544);
    };
  }
});
exports.default = _sfc_main;
//# sourceMappingURL=contextmenu-panel.vue2.cjs.map
